<template>
  <el-dialog width="650px" top="5%" title="订单核减" v-model="dialogFormVisible" :draggable="true" @close="dialogClose">
    <div class="info-box">
      <div>
        <span>订单编号：
          <span>{{ orderInfo.sysOrderId }}</span>
        </span>
        <span>商品名称：
          <span>{{ orderInfo.goodsName }}</span>
        </span>
      </div>
      <div>
        <span>商户名称：
          <span>{{ orderInfo.shopName }}</span>
        </span>
        <span>用户名称：
          <span>{{ orderInfo.buyUserName }}</span>
        </span>
      </div>
      <div>
        <span>数量：
          <span>{{ orderInfo.goodsNum }}</span>
        </span>
        <span>成本价(元)：
          <span>{{ numFormat(orderInfo.costPrice) || '' }}</span>
        </span>
      </div>
      <div>
        <span>支付金额(元)：
          <span style="color:#F59A23;">{{ numFormat(orderInfo.payMoney) || '' }}</span>
        </span>
        <span>佣金(元)：
          <span style="color:#000000;">{{ numFormat(orderInfo.income) || '' }}</span>
        </span>
      </div>
    </div>
    <div>
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules">
        <el-divider border-style="dashed" v-show="orderInfo.childInfoList && orderInfo.childInfoList.length > 0" />
        <el-form-item prop="checkList" :label="'商品('+(orderInfo.childInfoList && orderInfo.childInfoList.length)+'):'">
          <div class="goods-box" v-show="orderInfo.childInfoList && orderInfo.childInfoList.length > 0">
            <el-checkbox-group class="checkbox-box" v-model="dialogForm.checkList">
              <el-checkbox v-for="(item,index) in orderInfo.childInfoList" :key="item" :label="item.id">
                <template #default>
                  {{ `商品${index+1}：${item.cardNo || item.uniqueCode || item.linkUrl || '--'} (${item.orderStatus == 1 ? '已受理' : item.orderStatus == 2 ? '下单失败' : item.orderStatus == 3 ? '完成' : item.orderStatus == 4 ? '失败' : ''})` }}
                </template>
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-divider border-style="dashed" />
        <el-alert title="订单核减成功后，支付金额将原路退回给用户，佣金金额也自动从商户佣金账户中扣除。" :closable="false" type="warning" show-icon />
        <el-form-item label="核减金额(元)：">
          <el-input style="width:50%;" disabled v-model="allPrice" placeholder="请选择核减商品" />
        </el-form-item>
        <el-form-item prop="remarks" label="备注信息">
          <el-input v-model="dialogForm.remarks" placeholder="请输入备注信息" />
        </el-form-item>
        <el-divider border-style="dashed" />
        <el-form-item prop="password" label="登录密码">
          <el-input style="width:50%;" v-model="dialogForm.password" type="password" show-password
            placeholder="为保证本次操作安全，请输入登录密码" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitHandle">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { computed, reactive, ref, toRefs } from 'vue'
import { warningDeal, numFormat, successDeal } from '@/utils/utils'
import hexMD5 from "@/utils/md5.min.js"
import api from './api'
export default {
  setup(props, context) {
    const dialogFormRef = ref(null)

    const state = reactive({
      dialogFormVisible: false,
      orderInfo: {},
      dialogForm: {
        checkList: [],
      },
      allPrice: computed(() => {
        return (state.orderInfo.payMoney / state.orderInfo.goodsNum) * ((state.dialogForm.checkList && state.dialogForm.checkList.length) || 0)
      }),
      dialogFormRules: {
        password: [
          { required: true, message: '为保证本次操作安全，请输入登录密码', trigger: 'blur' },
        ],
        checkList: [
          { required: true, message: '请选择核减商品', trigger: 'blur' },
        ],
      },
    })

    function dialogShow(sysOrderId) {
      getOrderDetail(sysOrderId)
      state.dialogFormVisible = true
    }

    function getOrderDetail(sysOrderId) {
      const obj = {
        sysOrderId
      }
      api.orderDetail(obj).then(res => {
        if (res.code == '200') {
          state.orderInfo = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function submitHandle() {
      dialogFormRef.value.validate((valid, fields) => {
        if (valid) {
          const obj = {
            channelIds: state.dialogForm.checkList,
            remarks: state.dialogForm.remarks,
            sysOrderId: state.orderInfo.sysOrderId,
            password: hexMD5(state.dialogForm.password)
          }
          api.orderRevote(obj).then(res => {
            if (res.code == '200') {
              successDeal(res.msg)
              context.emit('dialogClose')
              state.dialogFormVisible = false
            } else {
              warningDeal(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      })
    }

    function dialogClose() {
      state.orderInfo = {}
      dialogFormRef.value.resetFields()
    }

    return {
      ...toRefs(state),
      dialogFormRef,
      dialogShow,
      dialogClose,
      submitHandle,
      numFormat,
    }
  }
}
</script>

<style lang="scss" scoped>
.info-box {
  > div {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    > span {
      display: block;
      width: 50%;
    }
  }
}
.checkbox-box {
  display: flex;
  flex-flow: column;
}
:deep(.el-divider--horizontal) {
  margin: 10px 0 !important;
}
</style>